<template>
	<view class="page">
		<!-- 编辑 -->
		<view class="article-edit">
			<view class="edit">
				<text>清空</text>
			</view>
			<view class="edit" @click="isEdit = !isEdit">
				<text>{{isEdit?'完成':'编辑'}}</text>
			</view>
		</view>
		<!-- 记录列表 -->
		<view class="record-data">
			<view class="record-list" v-for="(val,key,index) in dataObj" :key="index">
				<view class="record-date">
					<text>{{key}}</text>
				</view>
				<view class="goods-list">
					<view class="list" v-for="(item,idx) in val" :key="idx">
						<view class="check" :style="isEdit?'display: flex':'display: none'">
							<text class="iconfont icon-check"></text>
						</view>
						<view class="thumb">
							<image :src="item.productPic" mode=""></image>
						</view>
						<view class="item">
							<view class="title">
								<text class="two-omit">{{item.productName}}</text>
							</view>
							<view class="price-more">
								<view class="price">￥{{item.productPrice}}</view>
							</view>
							<view class="goods-btn">
								<view class="btn">
									<text>看相似</text>
								</view>
								<view class="cart">
									<text class="iconfont icon-cart"></text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom" v-if="showBottom">
			页面到底啦，请不要刷新啦
		</view>
		<view class="footer-btn" :style="isEdit?'display: flex':'display: none'">
			<view class="btn">删除</view>
		</view>
	</view>
</template>

<script>
	import shopProductHistoryApi from '@/api/shop-product-history.js'
	export default {
		data() {
			return {
				//分页对象 
				page: {
					pageSize: 5,
					pageNumber: 1
				},
				//是否禁止加载
				showBottom: false,
				// 列表对象
				dataObj: {},
				isEdit: false,
			};
		},
		onShow() {
			this.getByPage()
		},
		onReachBottom() {
			//是否允许下拉 false
			if (!this.showBottom) {
				//  上拉加载
				this.page.pageNumber++
				this.getByPage()
			}
		},
		methods: {
			//清空历史记录
			clearHistory() {
				shopProductHistoryApi.clearHistory().then(res => {
					this.showBottom = true
					this.dataObj = {}
					this.getByPage()
				})
			},
			// 分页查询历史记录
			getByPage() {
				shopProductHistoryApi.getByPage(this.page).then(res => {
					const dataMap = res.data
					const keys = Object.keys(dataMap)
					console.log("keys=>", keys)
					//一个一个追加
					if (dataMap && keys && keys[0]) {
						keys.forEach(key => {
							const dataArr = this.dataObj[key]
							if (dataArr && dataArr[0]) {
								dataArr.push(...this.dataObj[key])
								this.$set(this.dataObj, key, dataArr)
							} else {
								this.$set(this.dataObj, key, dataMap[key])
							}
						})
					} else {
						//不能继续下拉
						this.showBottom = true
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	@import 'BrowsingHistory.scss';
</style>
